<template>
	<div class="content" v-if="dialogVisible">
		<el-dialog title="肯定回答" :visible.sync="dialogVisible" :destroy-on-close="true" :before-close="onClose" width="500px" custom-class="sure-key">
			<el-form label-position="left" :model="form" :rules="rules" ref="NotKey">
				<el-form-item label="请选择肯定回答的文字">
					<el-checkbox-group v-model="key">
						<el-checkbox v-for="item in defaultKey" :label="item" :key="item"></el-checkbox>
					</el-checkbox-group>
				</el-form-item>

				<el-form-item label="">
					<el-button type="primary" @click="cancelSelectAll" v-show="key.length === defaultKey.length">取消全选</el-button>
					<el-button type="primary" @click="selectAll" v-show="key.length !== defaultKey.length">全选</el-button>
				</el-form-item>
				<el-form-item label="自定义肯定回答" prop="customKey">
					<div v-for="(item, index) in form.customKey" class="custom_view" :key="index">
						<el-input
							placeholder="请输入自定义的肯定回答文字"
							class="custom_input"
							v-model="item.value"
							minlength="0"
							:maxlength="customKeyLenth"
							@input="e => (item.value = validForbid(e))"
						></el-input>
					</div>
					<img src="../../assets/img/add@1x.png" class="add_custom_img" @click="add" />
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="onOk">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import _ from 'lodash';
export default {
	name: 'SureKey',
	data() {
		let validateCustomKey = (rule, value, callback) => {
			this.form.customKey.map(item => {
				if (!item.value || item.value.length === 0) {
					return;
				}
				if (item.value && item.value.length > this.customKeyLenth) {
					callback(new Error(`长度在 0 到 ${this.customKeyLenth} 个字符`));
					return;
				}
				if (this.defaultKey.includes(item.value)) {
					callback(new Error('文字已存在，请重新输入'));
					return;
				}
				const found = _.filter(this.form.customKey, { value: item.value });
				if (found && found.length >= 2) {
					callback(new Error('文字已存在，请重新输入'));
					return;
				}
			});
			callback();
		};
		return {
			customKeyLenth: 40,
			key: [],
			form: {
				customKey: [
					{
						value: ''
					}
				]
			},
			defaultKey: ['是的', '是', '我是', '对的', '对', '嗯', '嗯嗯', '是我', '是我本人', '没错', '知道', '我知道', '我清楚', '清楚', '我愿意', '愿意'],
			rules: {
				customKey: [{ validator: validateCustomKey, trigger: 'blur' }]
			}
		};
	},
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		keys: {
			type: Array,
			default: () => []
		}
	},
	mounted() {
		let selectKeys = _.cloneDeep(this.keys);
		let customKeys = _.difference(selectKeys, this.defaultKey);
		this.form.customKey = [];
		_.forEach(customKeys, item => {
			if (item && item.length > 0) {
				this.form.customKey.push({ value: item });
			}
		});
		this.key = _.pullAll(selectKeys, customKeys);
	},
	methods: {
		add() {
			this.form.customKey.push({
				value: ''
			});
		},
		selectAll() {
			this.key = this.defaultKey;
		},
		cancelSelectAll() {
			this.key = [];
		},
		onClose() {
			this.key = [];
			this.$emit('on-cancel');
		},
		onOk() {
			this.$refs['NotKey'].validate(valid => {
				if (valid) {
					let data = [...this.key];
					this.form.customKey.map(item => {
						item.value = item.value.trim();
						if (item.value && item.value.length > 0) {
							data.push(item.value);
						}
					});
					this.$emit('on-ok', data);
					this.key = [];
				} else {
					console.error('error submit!!');
					return false;
				}
			});
		}
	}
};
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);
}

.t {
	height: 20px;
	font-size: 13px;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	line-height: 20px;
	margin-top: 10px;
	text-align: left;
	align-self: flex-start;
	margin-left: 10px;
}

.custom_input {
	margin-bottom: 10px;
}

.custom_view {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
}

.add_custom_img {
	width: 25px;
	height: 25px;
	margin-left: 15px;
	margin-bottom: 10px;
}
</style>
<style>
.sure-key .el-form-item__label {
	width: 100%;
}
.sure-key .el-form-item__content {
	text-align: left;
	line-height: 30px;
	display: block;
}
.sure-key .el-dialog__body {
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}
</style>
